<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>勾选框</title>
	<link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
	<script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
	<script src="../jquery-tag-demo.js" type="text/javascript"></script>
	<script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
	<script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
	<link rel="stylesheet" type="text/css" href="../demo.css">
</head>
<body>
	<style>.wd120{width: 120px;}</style>
	<h2>选择框, 通过图片得到蓝色系勾选框</h2>
	<h3>说明:</h3>
	<span>点击勾选，常用于多项选择。</span>
	<h3>一.各种状态例子</h3>
	<div class="demo-exp-code entry-content"> 
		<div class="use-prettyprint fs0">
			<input class='hisui-checkbox' type="checkbox" data-options="onChecked:function(event,val){console.log('checked='+val);},
			onUnchecked:function(event,val){console.log('uncheck='+val)},onCheckChange:function(event,value){console.log(value)}" label="正常" id="checkbox1"/>
			<input class='hisui-checkbox' type="checkbox" data-options="checked:true" label="<span style='color:red'>勾选</span>" id="cb2"/>
			<input class='hisui-checkbox wd120' type="checkbox" style="width: 100px;" checked label="勾选-宽度样式类功能" id="cb3"/>
			<input class='hisui-checkbox' type="checkbox" disabled label="禁用" id="cb4"/>
			<input class='hisui-checkbox' type="checkbox" disabled checked label="勾选禁用" id="cb5"/>		
		</div>
   </div>
   <h3>二. 框在文本右边(<code>right</code>)</h3>
	<div class="demo-exp-code entry-content"> 
		<div class="use-prettyprint fs0">
			<input class='hisui-checkbox' type="checkbox" data-options="boxPosition:'right',onChecked:function(event,val){console.log('checked='+val);},onUnchecked:function(event,val){console.log('uncheck='+val)},onCheckChange:function(event,value){console.log(value)}" label="正常" id="cb11"/>
			<input class='hisui-checkbox' type="checkbox" data-options="checked:true,boxPosition:'right'" label="勾选" id="cb12"/>
			<input class='hisui-checkbox' type="checkbox" checked label="勾选" data-options="boxPosition:'right'" id="cb13"/>
			<input class='hisui-checkbox' type="checkbox" disabled label="禁用" data-options="boxPosition:'right'" id="cb14"/>
			<input class='hisui-checkbox' type="checkbox" disabled checked label="勾选禁用" data-options="boxPosition:'right'" id="cb15"/>
		</div>
   </div>
   <h3>三、必选功能</h3>
   <div class="demo-exp-code entry-content">
		<a href="#" onclick="setSexRequired();" class="hisui-linkbutton">切换必选功能</a>
		<span id="requiredMsg" style="line-height: 30px;vertical-align: bottom;"></span> 
		<div class="use-prettyprint lang-html" style="margin-top: 10px;">
			
<div class="fs0">
<label id="reqLabel" style='vertical-align:middle;margin-right:10px;'>
<span style="color: red;" id="myredstar">*</span>症状表现</label>
<input class='hisui-checkbox' type="checkbox" label=头痛 name='sex' value="1" data-options="required:true">
<input class='hisui-checkbox' type="checkbox" label='盗汗' name='sex' value="2" data-options="required:true">
<input class='hisui-checkbox' type="checkbox" label='耳鸣' name='sex' value="3" data-options="required:true"></div>
		</div>
	   <script type="text/javascript" class="use-prettyprint">
		var flag = true;
		function setSexRequired(){
			$("#requiredMsg").html('当前'+(flag?"非必选":"必选"));
			if (flag){ $("#reqLabel span").remove();}
			else{$('#reqLabel').prepend('<span style="color: red;" id="myredstar">*</span>');}
			$('[name="sex"]').checkbox('setRequired',flag=!flag);
			
		};</script>
		</div>

	<div>
		<h3>复选框组件的相关配置、事件、方法</h3>
		<table class="table">
			<tr class="protitle">
				<th>属性</th>
				<th>说明</th>
				<th>默认值</th>
				<th></th>
			</tr>
			<tr>
				<td>id</td>
				<td>复选框的Id</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>label</td>
				<td>描述</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>disabled</td>
				<td>是否禁用。默认可用</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>checked</td>
				<td>是否选中。默认不选中</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>boxPosition</td>
				<td>勾选框位置</td>
				<td>'left'</td>
				<td>可选'right'<code>20191104</code></td>
			</tr>
			<tr>
				<td>required</td>
				<td>name相同判断为一组，且是否必选一项</td>
				<td>false</td>
				<td>true时为必选一项,不选会变红提示<code>20200726</code></td>
			</tr>
			<tr class="evttitle">
				<th>事件名</th>
				<th>说明</th>
				<th>入参</th>
				<th></th>
			</tr>
			<tr>
				<td>onCheckChange</td>
				<td>选中改变事件</td>
				<td>e,value</td>
				<td></td>
			</tr>
			<tr>
				<td>onChecked</td>
				<td>选中事件</td>
				<td>e,value</td>
				<td></td>
			</tr>
			<tr>
				<td>onUnchecked</td>
				<td>取消选中时触发</td>
				<td>e,value</td>
				<td></td>
			</tr>
			<tr class="mthtitle">
				<th>方法名</th>
				<th>说明</th>
				<th>入参</th>
				<th>返回值</th>
			</tr>
			<tr>
				<td>options</td>
				<td>拿到配置项对象</td>
				<td></td>
				<td>checkbox的options对象</td>
			</tr>
			<tr>
				<td>setValue</td>
				<td>选中元素</td>
				<td>true|false</td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>getValue</td>
				<td>拿到是否选中</td>
				<td></td>
				<td>true|false</td>
			</tr>
			<tr>
				<td>setDisable</td>
				<td>禁用</td>
				<td>false|true</td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>check</td>
				<td>选中</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>uncheck</td>
				<td>取消选中</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>toggle</td>
				<td>切换选中</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>disable</td>
				<td>禁用选框</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>enable</td>
				<td>启用选框</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>indeterminate</td>
				<td>设置不定选状态</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>determinate</td>
				<td>取消不定选状态</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>update</td>
				<td>重绘选框</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>destroy</td>
				<td>销毁选框</td>
				<td></td>
				<td>jquery对象</td>
			</tr>
			<tr>
				<td>isValid</td>
				<td>必选一项验证<code>20200726</code></td>
				<td></td>
				<td>Boolean</td>
			</tr>
			<tr>
				<td>setRequired</td>
				<td>调置或取消必项状态<code>20210205</code></td>
				<td>true|false</td>
				<td>jquery对象</td>
			</tr>
		</table>
	</div>
	<script>
		$(function(){
			$("#selectba").click(function(){
				$HUI.radio("#ba").setValue(true);
			});
		});
	</script>
	<prettyprint/>
	<script>
        function onResizePretty(){
            $('.hisui-checkbox').checkbox('isValid');
        }
    </script>
</body>
</html>